$(function () {
    let bannerRender = (function () {
        let $container = $('#container'),
            $wrapper = $('.wrapper'),
            $focus = $('.focus'),
            $arrow = $('.arrow'),
            $left = $('.left'),
            $right = $('.right'),
            $slideList = null,
            $focusList = null,
            $img = null

        let step = 0,
            autoTimer = null,
            interval = 3000


        // 获取数据
        let queryDta = function () {
            return new Promise((resolve, reject) => {
                $.ajax({
                    'type': 'GET',
                    url: 'json/banner.json',
                    dataType: 'json',
                    success: data => resolve(data),
                    error: err => reject(err)

                })
            })
        }

        // 解析数据
        let renderHtml = function (data) {
            let slideStr = focusStr = ''
            data.forEach(({ img, desc }, index) => {
                slideStr += `<div class="slide"><img src="${img}" alt="${desc}"></div>`
                focusStr += `<li class="${index == 0 ? 'active' : ''}"></li>`
            })
            $wrapper.html(slideStr)
            $focus.html(focusStr)
            // 网页上有了这些html元素，现在要赋值
            $slideList = $('.slide')
            $focusList = $('.focus li')
            $img = $slideList.children('img').first()

            $wrapper.width($slideList.length * 500)

        }
        // 自动轮播
        let autoMOVe = function () {
            step++
            // 边界判断
            if (step > $slideList.length - 1) {
                $wrapper.css('left', 0)
                step = 0
            }
            $wrapper.animate({ left: -500 * step }, 500)
            //  小圆点跟着动
            $focusList.eq(step).addClass('active').siblings().removeClass('active')
        }

        // 鼠标放上container停止轮播 左右按钮显示
        let handerContainer = function () {
            $container.on('mouseenter', function () {
                clearInterval(autoTimer)
                $arrow.show()
            }).on('mouseleave', function () {
                autoTimer = setInterval(autoMOVe, interval)
                $arrow.hide()
            })
        }
        // 点击左右按钮实现切换
        let handleArrow = function () {
            $right.on('click', autoMOVe)
            // 左边按钮
            $left.on('click', function () {
                step--
                // 边界判断
                if (step < 0) {
                    step = $slideList.length - 1
                    $wrapper.css('left', -step * 500)
                }
                $wrapper.animate({ left: -step * 500 }, 500)
                $focusList.eq(step).addClass('active').siblings().removeClass('active')
            })
        }
        // 点击小圆点实现切换
        let handleFocus = function () {
            //事件最好不用箭头函数，因为有时候要到this
            $focusList.on('click', function () {
                step = $(this).index()
                $wrapper.css('left', -step * 500)
                $(this).addClass('active').siblings().removeClass('active')

            })
        }





        return {
            init: function () {
                let promise = queryDta()
                // promise内部自动执行方法传数据
                promise.then(renderHtml).then(() => {
                    autoTimer = setInterval(autoMOVe, interval)
                }).then(() => {
                    handerContainer()
                    handleArrow()
                    handleFocus()

                })
            }
        }
    })()

    bannerRender.init()


})